<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/1/1
  Time: 21:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品详情</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }

        .li1 {
            list-style: none; /*列表前面的符号设为无*/
            height: 35px; /*列表高度*/
            margin-left: 5px; /*左边距*/
            margin-right: 5px; /*右边距*/
            line-height: 35px; /*行高*/
            border-bottom: 1px #FFE2E2 solid; /*设置下边框，1像素，颜色，样式（一条线）*/
        }

        a {
            text-decoration: none;
        }

        a:hover {
            color: #FB88C4;
        }

        .span1 {
            color: #F5A65A;
            position: absolute;
            right: 15px;
        }
    </style>
</head>
<body>
<iframe src="header.jsp" scrolling="no"<%--取消滚动条--%> style="width:100%; height:185px; border:none; "></iframe>
<div style="width:1000px; height:670px; position:relative<%--相对定位，子绝父相--%>">
    <%--左边--%>
    <div style="width:250px; height:600px; background-color:#F5A65A; position:absolute<%--绝对定位，子绝父相--%>; left:0px">
        <p style="color:#884E16; font-weight:bold; margin-left:15px; margin-top:5px">物品分类</p>
        <div style="background-color: white; width:246px;height:572px">
            <ul>
                <li class="li1"><a href="#">首页</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">护肤</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">彩妆</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">香氛</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">身体护理</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">礼盒套装</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">母婴专区</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">男士专区</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">粉底</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">粉饼</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">睫毛膏</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">唇彩</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">腮红</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">食品保健</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">瘦身类</a> <span class="span1">&gt;</span></li>
                <li class="li1"><a href="#">美容类</a> <span class="span1">&gt;</span></li>
            </ul>
        </div>
    </div>

    <%--右边--%>
    <div style="text-align:center; width:750px; height:600px; position:absolute<%--绝对定位，子绝父相--%>;right:0px">
        <p style="font-weight:bold">Cetaphil丝塔芙洗面奶（法国）200ml极其温和的配方卓越的保湿功效严谨的生产方式</p>

        <%--右边的左边--%>
        <div style="width:300px; height:450px; position:absolute; left:0px; top:26.2px">
            <div style="width:295px; height:400px; border:1px #CCCCCC solid">
                <img width="250px" height="350px" src="images/images/article/20130331_333_2.jpg" alt="找不到图片"
                     style="margin-top:25px">
                <div style="margin-top:32px; font-size:13px">
                    <p>评分：<img src="images/images/star.png" width="70px" height="20px">&nbsp;<a href="#">（已有151人评价）</a></p>
                    <p><a href="#">该商品支持全国购买</a></p>
                </div>
            </div>
        </div>

        <%--右边的右边--%>
        <div style="width:450px; height:450px; position:absolute;right:0px;top:26.2px">
            <div style="text-align:left; margin-left:50px;border-top:1px #CCCCCC solid;width: 400px; height:400px;">
                <table align="left" cellspacing="5px" style="font-size:14px">
                    <tr height="10px"></tr>
                    <tr>
                        <td width="75px">供应商：</td>
                        <td><span style="font-weight:bold">Cetaphil丝塔芙洗面奶</span></td>
                    </tr>
                    <tr height="10px"></tr>
                    <tr>
                        <td>出产地：</td>
                        <td><span style="font-weight:bold">法国</span></td>
                    </tr>
                    <tr height="10px"></tr>
                    <tr>
                        <td>定价：</td>
                        <td><span style="font-weight:bold">$108.67</span></td>
                    </tr>
                    <tr height="10px"></tr>
                    <tr style="color:#FF0000">
                        <td>疯狂价：</td>
                        <td><span style="font-weight:bold">88.67（7折）</span></td>
                    </tr>
                    <tr height="10px"></tr>
                    <tr>
                        <td>库存：</td>
                        <td><span style="font-weight:bold">156&nbsp;&nbsp;<span
                                style="color: #CBCDC3">下单后立即发货</span></span></td>
                    </tr>
                    <tr height="10px"></tr>
                    <tr>
                        <td>促销信息：</td>
                        <td style="color:#FF0000"><span style="font-weight:bold" align="bottom">该商品参加满减活动，购买活动商品每满300元，可减100元现金</span>
                        </td>
                    </tr>
                    <tr height="10px"></tr>
                    <tr height="10px"></tr>
                    <tr height="10px"></tr>
                    <tr>
                        <td colspan="2" style="border:2px #fac864 solid">
                            <div style="height:40px; border-bottom: 2px #fac864 solid;line-height:40px ">
                                &nbsp;购买数量：
                                <button id="but1" style="width: 20px">&nbsp;-&nbsp;</button>
                                <input id="input1" type="text" value="2" style="width: 25px; text-align: center">
                                <button id="but2" style="width: 20px">&nbsp;+&nbsp;</button>

                            </div>
                            <div style="height:45px;margin-top: 10px">
                                <a href="#">&nbsp;<img src="images/images/goodsinfo.png" height="35px"></a>
                                <a href="#">&nbsp;<img src="images/images/btn_attention.jpg" height="35px"></a>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

</div>

<%--下面--%>
<div style="width:100%; height:258px;margin-bottom: 0px;background-color:#F9F9F9">
    <div align="center" style="border-top: 1px #E0E0E0 solid">
        <img src="images/images/step.jpg">
    </div>
</div>
</body>
<script>
    var but1 = document.getElementById("but1");
    var but2 = document.getElementById("but2");
    var input1 = document.getElementById("input1");
    but2.onclick = function () {
        input1.value =parseInt(input1.value)+2;
    }
    but1.onclick = function () {
        input1.value =parseInt(input1.value)-2;
    }
</script>
</html>
